<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="category-card" shadow="hover">
          <div class="category-title">
            <i class="el-icon-menu"></i>
            分类列表
            <el-button type="text" icon="el-icon-refresh" @click="handleQuery" style="float:right">刷新</el-button>
          </div>
          <div class="category-filter" style="margin-top: 15px; padding: 0 5px;">
            <!-- 优化的分类选择器 -->
            <el-select
              v-model="filterCategory"
              placeholder="请选择分类筛选"
              clearable
              filterable
              style="width: 100%"
              @change="handleFilterChange"
              :loading="loading"
              popper-class="category-select-dropdown"
            >
              <el-option-group label="常用分类">
                <el-option
                  v-for="item in frequentCategories"
                  :key="'freq-' + item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId"
                >
                  <span style="float: left">{{ item.categoryName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    <el-tag size="mini" :type="getLevelTag(item.level)">L{{ item.level }}</el-tag>
                  </span>
                </el-option>
              </el-option-group>
              <el-option-group label="全部分类">
                <el-option
                  v-for="item in categoryOptions"
                  :key="item.categoryId"
                  :label="item.categoryName"
                  :value="item.categoryId"
                >
                  <span style="float: left">{{ item.categoryName }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">
                    <el-tag size="mini" :type="getLevelTag(item.level)">L{{ item.level }}</el-tag>
                  </span>
                </el-option>
              </el-option-group>
            </el-select>
          </div>
          <div class="category-content">
            <el-tree
                v-if="filteredData?.length"
                ref="tree"
                :data="filteredData"
                :props="defaultProps"
                :expand-on-click-node="false"
                node-key="categoryId"
                default-expand-all
                :highlight-current="true"
                show-checkbox
                @node-click="handleNodeClick"
                @check-change="handleCheckChange"
            >
              <span class="custom-tree-node" slot-scope="{ data }">
                <span class="node-content">
                  <el-tag size="mini" :type="getLevelTag(data.level)" effect="dark">
                    L{{ data.level }}
                  </el-tag>
                  <span class="category-name">{{ data.categoryName }}</span>
                  <el-tag size="mini" type="info">{{ data.sort }}</el-tag>
                </span>
              </span>
            </el-tree>
            <el-empty v-else description="暂无分类数据">
              <el-button type="primary" size="small" @click="handleAdd">新增分类</el-button>
            </el-empty>
          </div>
        </el-card>
      </el-col>

      <el-col :span="18">
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span class="card-title">
              <template v-if="selectedNode">
                <span class="selected-category">
                  {{ selectedNode.categoryName }}
                  <el-tag size="mini" type="info" class="sort-tag">
                    排序: {{ selectedNode.sort }}
                  </el-tag>
                </span>
              </template>
              <span v-else>物料分类详情</span>
            </span>
            <div class="action-buttons">
              <el-button type="warning" icon="el-icon-sort" size="small" @click="openSortDialog">批量排序</el-button>
              <el-button type="danger" icon="el-icon-delete" size="small" @click="handleBatchDelete">批量删除</el-button>
              <el-button type="success" icon="el-icon-plus" size="small" @click="handleAdd">新增分类</el-button>
            </div>
          </div>

          <div class="detail-content" v-loading="loading">
            <template v-if="selectedNode">
              <div class="detail-info">
                <el-descriptions :column="2" border>
                  <el-descriptions-item label="分类名称">{{ selectedNode.categoryName }}</el-descriptions-item>
                  <el-descriptions-item label="分类层级">
                    <el-tag size="small" :type="getLevelTag(selectedNode.level)">Level {{ selectedNode.level }}</el-tag>
                  </el-descriptions-item>
                  <el-descriptions-item label="排序值">{{ selectedNode.sort }}</el-descriptions-item>
                  <el-descriptions-item label="上级分类">
                    <el-link type="primary" v-if="getParentName(selectedNode.parentId)"
                             @click="handleParentClick(selectedNode.parentId)">
                      {{ getParentName(selectedNode.parentId) }}
                    </el-link>
                    <span v-else>无</span>
                  </el-descriptions-item>
                </el-descriptions>

                <div class="detail-actions">
                  <el-button-group>
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAddChild(selectedNode)">
                      添加子分类
                    </el-button>
                    <el-button type="warning" size="small" icon="el-icon-edit" @click="handleUpdate(selectedNode)">
                      编辑分类
                    </el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" @click="handleDelete(selectedNode)">
                      删除分类
                    </el-button>
                  </el-button-group>
                </div>

                <div class="sub-categories" v-if="selectedNode.children && selectedNode.children.length">
                  <div class="sub-title">子分类列表</div>
                  <el-table :data="selectedNode.children" border stripe size="small" highlight-current-row>
                    <el-table-column prop="categoryName" label="分类名称" align="center" show-overflow-tooltip/>
                    <el-table-column prop="sort" label="排序" width="80" align="center" sortable/>
                    <el-table-column label="操作" width="280" align="center">
                      <template slot-scope="{row}">
                        <el-button-group>
                          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAddChild(row)">添加
                          </el-button>
                          <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">编辑
                          </el-button>
                          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row)">删除
                          </el-button>
                        </el-button-group>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>
            </template>
            <el-empty v-else description="请选择左侧分类查看详情">
              <el-button type="primary" size="small" @click="handleAdd">新增分类</el-button>
            </el-empty>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加或修改物料分类对话框 -->
    <el-dialog
        :title="title"
        :visible.sync="open"
        width="500px"
        append-to-body
        :close-on-click-modal="false"
        :destroy-on-close="true"
        @close="cancel"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="上级分类" prop="parentId">
          <el-cascader
              v-model="form.parentId"
              :options="categoryOptions"
              :props="cascaderProps"
              clearable
              style="width: 100%"
              placeholder="不选择则为顶级分类"
              @change="handleParentChange"
              filterable
              :disabled="!!form.categoryId"
          />
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName">
          <el-input
              v-model="form.categoryName"
              placeholder="请输入分类名称"
              maxlength="100"
              show-word-limit
              clearable
              @keyup.enter.native="submitForm"
          />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number
              v-model="form.sort"
              controls-position="right"
              :min="0"
              :max="999"
              style="width: 120px"
          />
          <span class="form-help">数值越小越靠前</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoading" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 批量排序对话框 -->
    <el-dialog
        title="批量排序"
        :visible.sync="sortDialogVisible"
        width="700px"
        :close-on-click-modal="false"
    >
      <el-alert
          title="提示：通过修改排序值调整同级分类的显示顺序，数值越小越靠前"
          type="info"
          :closable="false"
          show-icon
          style="margin-bottom: 20px"
      />
      <el-table
          :data="sortableData"
          row-key="categoryId"
          border
          stripe
          style="width: 100%"
      >
        <el-table-column prop="categoryName" label="分类名称" show-overflow-tooltip/>
        <el-table-column prop="level" label="层级" width="100" align="center">
          <template slot-scope="{row}">
            <el-tag size="mini" :type="getLevelTag(row.level)" effect="dark">
              L{{ row.level }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" width="180" align="center">
          <template slot-scope="{row}">
            <el-input-number
                v-model="row.sort"
                :min="0"
                :max="999"
                size="mini"
                controls-position="right"
                @change="handleSortChange"
            />
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="sortLoading" @click="submitBatchSort">确定</el-button>
        <el-button @click="sortDialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import html2canvas from 'html2canvas'
close.log
export default {
  name: 'MaterialCategoryView',
  data() {
    return {
      loading: true,
      categoryData: [],
      processedData: null,
      selectedNode: null,
      checkedNodes: [],
      defaultProps: {
        children: 'children',
        label: 'categoryName'
      },
      cascaderProps: {
        value: 'categoryId',
        label: 'categoryName',
        children: 'children',
        checkStrictly: true,
        emitPath: false,
        expandTrigger: 'hover'
      },
      // 表单参数
      form: {
        categoryId: undefined,
        categoryName: '',
        parentId: 0,
        level: 1,
        sort: 0
      },
      // 表单校验规则
      rules: {
        categoryName: [
          { required: true, message: '分类名称不能为空', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '排序值不能为空', trigger: 'blur' }
        ]
      },
      open: false,
      title: '',
      submitLoading: false,
      sortDialogVisible: false,
      sortableData: [],
      sortLoading: false,
      categoryOptions: [],
      filterCategory: undefined,
      filteredData: null,
      frequentCategories: [], // 常用分类列表
    }
  },
  created() {
    this.handleQuery()
  },
  methods: {
    // 查询分类列表
    async handleQuery() {
      try {
        this.loading = true
        const res = await request({
          url: '/material/category/tree',
          method: 'get'
        })
        console.log('原始响应数据:', res)
        // 确保数据是数组格式
        this.processedData = Array.isArray(res) ? res : []
        this.filteredData = this.processedData // 初始化筛选数据
        // 更新分类选项，使用扁平化处理后的选项
        this.updateCategoryOptions()
        this.updateFrequentCategories() // 更新常用分类
        console.log('处理后的分类数据:', this.processedData)
      } catch (error) {
        console.error('获取分类列表失败:', error)
        this.$message.error('获取分类列表失败')
      } finally {
        this.loading = false
      }
    },

    // 更新分类选项
    updateCategoryOptions() {
      // 将树形数据扁平化处理为一维数组
      const flattenCategories = (data, prefix = '') => {
        let result = []
        data.forEach(item => {
          const categoryName = prefix ? `${prefix} / ${item.categoryName}` : item.categoryName
          result.push({
            categoryId: item.categoryId,
            categoryName: categoryName
          })
          if (item.children && item.children.length) {
            result = result.concat(flattenCategories(item.children, categoryName))
          }
        })
        return result
      }
      
      // 生成扁平化的选项数据
      this.categoryOptions = flattenCategories(this.processedData)
    },

    // 获取子分类
    async getChildren(parentId) {
      try {
        const res = await request({
          url: `/material/category/${parentId}/children`,
          method: 'get'
        })
        return res
      } catch (error) {
        console.error('获取子分类失败:', error)
        this.$message.error('获取子分类失败')
        return []
      }
    },

    // 提交表单
    submitForm() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.submitLoading = true
          try {
            const method = this.form.categoryId ? 'put' : 'post'
            const res = await request({
              url: '/material/category',
              method,
              data: this.form
            })
            if (res.code === 200) {
              this.$message.success('保存成功')
              this.open = false
              await this.handleQuery()
              
              // 如果是修改操作，重新选中当前节点
              if (this.form.categoryId) {
                const updatedNode = this.findNodeById(this.processedData, this.form.categoryId)
                if (updatedNode) {
                  this.selectedNode = updatedNode
                  this.$refs.tree.setCurrentKey(this.form.categoryId)
                }
              }
              
              // 如果是添加子分类操作，展开父节点
              if (this.form.parentId) {
                this.$refs.tree.setCurrentKey(this.form.parentId)
                await this.$nextTick()
                this.$refs.tree.store.nodesMap[this.form.parentId].expanded = true
              }
            }
          } catch (error) {
            console.error('保存失败:', error)
            this.$message.error('保存失败')
          } finally {
            this.submitLoading = false
          }
        }
      })
    },

    // 删除分类
    async handleDelete(row) {
      try {
        await this.$confirm('是否确认删除该分类？', '警告', {
          type: 'warning'
        })
        const res = await request({
          url: `/material/category/${row.categoryId}`,
          method: 'delete'
        })
        if (res.code === 200) {
          this.$message.success('删除成功')
          // 删除成功后，从常用分类和使用记录中移除
          this.removeFromUsageCount(row.categoryId)
          this.removeFromRecentUsed(row.categoryId)
          await this.handleQuery()
        }
      } catch (error) {
        console.error('删除失败:', error)
      }
    },

    // 批量删除
    async handleBatchDelete() {
      const checkedKeys = this.$refs.tree.getCheckedKeys()
      if (!checkedKeys.length) {
        this.$message.warning('请选择要删除的分类')
        return
      }
      try {
        await this.$confirm(`是否确认删除选中的 ${checkedKeys.length} 个分类？`, '警告', {
          type: 'warning'
        })
        const res = await request({
          url: '/material/category/batch',
          method: 'delete',
          data: checkedKeys
        })
        if (res.code === 200) {
          this.$message.success('批量删除成功')
          // 批量删除成功后，从常用分类和使用记录中移除
          checkedKeys.forEach(categoryId => {
            this.removeFromUsageCount(categoryId)
            this.removeFromRecentUsed(categoryId)
          })
          await this.handleQuery()
        }
      } catch (error) {
        console.error('批量删除失败:', error)
      }
    },

    // 从最近使用记录中移除分类
    removeFromRecentUsed(categoryId) {
      const recentUsed = localStorage.getItem('recentUsedCategories')
      if (recentUsed) {
        const categories = JSON.parse(recentUsed).filter(item => item.categoryId !== categoryId)
        localStorage.setItem('recentUsedCategories', JSON.stringify(categories))
      }
    },

    // 批量排序
    async submitBatchSort() {
      if (!this.sortableData.length) {
        this.$message.warning('没有可排序的数据')
        return
      }
      try {
        this.sortLoading = true
        const res = await request({
          url: '/material/category/batchSort',
          method: 'put',
          data: this.sortableData
        })
        if (res.code === 200) {
          this.$message.success('排序更新成功')
          this.sortDialogVisible = false
          this.handleQuery()
        }
      } catch (error) {
        console.error('排序更新失败:', error)
        this.$message.error('排序更新失败')
      } finally {
        this.sortLoading = false
      }
    },

    // 打开排序对话框
    openSortDialog() {
      this.sortableData = [...this.processedData]
      this.sortDialogVisible = true
    },

    // 节点点击
    handleNodeClick(data) {
      this.selectedNode = data
    },

    // 复选框状态变更
    handleCheckChange() {
      this.checkedNodes = this.$refs.tree.getCheckedNodes()
    },

    // 获取父级分类名称
    getParentName(parentId) {
      const findParent = (data, id) => {
        for (const item of data) {
          if (item.categoryId === id) {
            return item.categoryName
          }
          if (item.children) {
            const found = findParent(item.children, id)
            if (found) return found
          }
        }
        return null
      }
      return parentId ? findParent(this.processedData, parentId) : null
    },

    // 获取层级标签类型
    getLevelTag(level) {
      const types = ['', 'success', 'warning', 'danger']
      return types[level] || 'info'
    },

    // 新增分类
    handleAdd() {
      this.open = true
      this.title = '添加分类'
      this.form = {
        categoryId: undefined,
        categoryName: '',
        parentId: 0,
        level: 1,
        sort: 0
      }
      // 更新分类选项
      this.updateCategoryOptions()
    },

    // 修改分类
    handleUpdate(row) {
      this.form = { 
        ...row,
        // 如果是顶级分类，确保parentId为0
        parentId: row.parentId || 0
      }
      this.open = true
      this.title = '修改分类'
      // 更新分类选项
      this.updateCategoryOptions()
    },

    // 添加子分类
    handleAddChild(row) {
      this.open = true
      this.title = '添加子分类'
      this.form = {
        categoryId: undefined,
        categoryName: '',
        parentId: row.categoryId,
        level: row.level + 1,
        sort: 0
      }
      // 更新分类选项
      this.updateCategoryOptions()
    },

    // 取消
    cancel() {
      this.open = false
      this.resetForm()
    },

    // 重置表单
    resetForm() {
      this.form = {
        categoryId: undefined,
        categoryName: '',
        parentId: 0,
        level: 1,
        sort: 0
      }
      this.$refs.form?.resetFields()
    },

    // 导出图片
    async exportImage() {
      try {
        const element = document.querySelector('.app-container')
        const canvas = await html2canvas(element)
        const link = document.createElement('a')
        link.download = '物资分类表.png'
        link.href = canvas.toDataURL()
        link.click()
      } catch (error) {
        console.error('导出图片失败:', error)
        this.$message.error('导出图片失败')
      }
    },

    // 处理父级变更
    handleParentChange(value) {
      if (!value) {
        // 选择顶级分类
        this.form.parentId = 0
        this.form.level = 1
      } else {
        // 选择其他分类作为父级
        const parentNode = this.findNodeById(this.processedData, value)
        if (parentNode) {
          this.form.parentId = parentNode.categoryId
          this.form.level = parentNode.level + 1
        }
      }
    },

    // 根据ID查找节点
    findNodeById(data, id) {
      for (const node of data) {
        if (node.categoryId === id) {
          return node
        }
        if (node.children && node.children.length) {
          const found = this.findNodeById(node.children, id)
          if (found) return found
        }
      }
      return null
    },

    // 处理排序变更
    handleSortChange() {
      // 排序值变更时的处理逻辑
    },

    // 处理筛选变更
    handleFilterChange(value) {
      if (!value) {
        this.filteredData = this.processedData
        return
      }
      
      const selectedNode = this.findNodeById(this.processedData, value)
      if (selectedNode) {
        this.filteredData = [selectedNode]
        this.recordUsedCategory(selectedNode)
      }
    },

    // 更新常用分类
    updateFrequentCategories() {
      // 获取最近使用的分类
      const recentUsed = localStorage.getItem('recentUsedCategories')
      let recentCategories = recentUsed ? JSON.parse(recentUsed) : []
      
      // 过滤掉已删除的分类
      recentCategories = recentCategories.filter(item => {
        return this.findNodeById(this.processedData, item.categoryId)
      })
      
      // 更新本地存储（清理已删除的分类）
      localStorage.setItem('recentUsedCategories', JSON.stringify(recentCategories))
      
      // 添加使用次数统计
      recentCategories = recentCategories.map(item => ({
        ...item,
        useCount: this.getUsageCount(item.categoryId)
      }))
      
      // 按使用次数排序
      recentCategories.sort((a, b) => (b.useCount || 0) - (a.useCount || 0))
      
      this.frequentCategories = recentCategories.length ? recentCategories : this.getDefaultFrequentCategories()
    },

    // 从使用记录中删除分类
    removeFromUsageCount(categoryId) {
      const usageData = localStorage.getItem('categoryUsageCount') || '{}'
      const usageCount = JSON.parse(usageData)
      delete usageCount[categoryId]
      localStorage.setItem('categoryUsageCount', JSON.stringify(usageCount))
    },

    // 获取使用次数
    getUsageCount(categoryId) {
      const usageData = localStorage.getItem('categoryUsageCount') || '{}'
      const usageCount = JSON.parse(usageData)
      return usageCount[categoryId] || 0
    },

    // 获取默认的常用分类
    getDefaultFrequentCategories() {
      // 实现获取默认常用分类的逻辑
      return []
    },

    // 记录使用过的分类
    recordUsedCategory(category) {
      let recentUsed = localStorage.getItem('recentUsedCategories')
      recentUsed = recentUsed ? JSON.parse(recentUsed) : []
      
      // 移除已存在的相同分类
      recentUsed = recentUsed.filter(item => item.categoryId !== category.categoryId)
      
      // 添加到开头
      recentUsed.unshift({
        categoryId: category.categoryId,
        categoryName: category.categoryName,
        level: category.level
      })
      
      // 只保留最近10个
      recentUsed = recentUsed.slice(0, 10)
      
      localStorage.setItem('recentUsedCategories', JSON.stringify(recentUsed))
      this.updateFrequentCategories()
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 84px);
  height: 100%;
  overflow: hidden;

  .category-card, .detail-card {
    height: calc(100vh - 140px);
    transition: all 0.3s;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    
    &:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }

  .category-card {
    .category-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 15px;
      padding: 10px 0;
      border-bottom: 1px solid #ebeef5;
      display: flex;
      align-items: center;
      justify-content: space-between;

      i {
        margin-right: 8px;
        color: #409EFF;
      }
    }

    .category-content {
      flex: 1;
      overflow-y: auto;
      padding: 0 5px;
      position: relative;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
      }

      .el-tree {
        background: transparent;
        
        :deep(.el-tree-node__content) {
          height: 36px;
          border-radius: 4px;
          
          &:hover {
            background-color: #f0f7ff;
          }
        }

        .node-content {
          .category-name {
            margin: 0 8px;
            color: #606266;
          }
        }
      }
    }
  }

  .detail-card {
    .card-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;

      .selected-category {
        display: inline-flex;
        align-items: center;
        gap: 10px;

        .sort-tag {
          margin-left: 10px;
        }
      }
    }

    .action-buttons {
      float: right;
      
      .el-button {
        margin-left: 8px;
        
        &:hover {
          opacity: 0.9;
        }
      }
    }

    .detail-content {
      flex: 1;
      overflow-y: auto;
      padding: 20px 0;

      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
      }

      .detail-info {
        .el-descriptions {
          padding: 20px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
        }

        .detail-actions {
          margin: 20px 0;
          text-align: center;
        }

        .sub-categories {
          margin-top: 30px;

          .sub-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-left: 10px;
            border-left: 3px solid #409EFF;
            color: #303133;
          }

          .el-table {
            border-radius: 4px;
            overflow: hidden;
            
            th {
              background-color: #f5f7fa;
              color: #606266;
            }
            
            td {
              padding: 8px 0;
            }
          }
        }
      }
    }
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .form-help {
    margin-left: 10px;
    color: #909399;
    font-size: 13px;
  }

  :deep(.el-dialog) {
    border-radius: 8px;
    
    .el-dialog__header {
      padding: 20px;
      margin: 0;
      border-bottom: 1px solid #ebeef5;
      
      .el-dialog__title {
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
    }
    
    .el-dialog__body {
      padding: 30px 20px;
    }
    
    .el-dialog__footer {
      padding: 15px 20px;
      border-top: 1px solid #ebeef5;
    }
  }
}
</style>

<style lang="scss">
// 分类选择下拉框样式优化
.category-select-dropdown {
  .el-select-dropdown__item {
    height: 34px;
    line-height: 34px;
    
    &.selected {
      color: #409EFF;
      font-weight: bold;
    }
  }
  
  .el-select-group__title {
    padding-left: 15px;
    font-size: 13px;
    color: #909399;
    font-weight: bold;
  }
  
  .el-select-dropdown__item.hover, 
  .el-select-dropdown__item:hover {
    background-color: #f5f7fa;
  }
  
  .el-tag {
    margin-left: 8px;
  }
}

// 搜索框样式优化
.category-filter {
  .el-input {
    .el-input__inner {
      border-radius: 4px;
      
      &:focus {
        border-color: #409EFF;
      }
    }
    
    .el-input__prefix {
      left: 8px;
      color: #909399;
    }
  }
}
</style>
